<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								我的团队
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
			<view class="padding-about-24 margin-top-20">
				<view class="balance-section" :style="{background: `url(${imgaeUrl('/static/home/tdbg.png')})`}">
					<view style="padding-top: 50rpx;" class="display-flex flex-direction-column  center align-items">
						<view class="font-size-22 color-FFF">
							我的团队
						</view>
						<text class=" font-size-54 color-FFF font-weight-bold">{{info.totla_num}}</text>
					</view>
					<view style="padding:0 48rpx;" class="display-flex margin-top-20 space-between ">
						<view style="padding-top: 50rpx;"
							class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{info.today_num}}</text>
							<view class="font-size-24 color-FFF">
								今日新增
							</view>
						</view>
						<view style="padding-top: 50rpx;"
							class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{info.month_num}}</text>
							<view class="font-size-24 color-FFF">
								本月新增
							</view>
						</view>
						<view style="padding-top: 50rpx;"
							class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{info.lastMonth_num}}</text>
							<view class="font-size-24 color-FFF">
								上月新增
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="margin-top-20">
					<uv-search bgColor="#FFFFFF" :showAction="false" placeholder="搜索粉丝手机号、昵称、ID" v-model="keyword">
						<template slot="suffix">
							<view class="button color-FFF font-size-22" style="padding: 10rpx 20rpx; ">
								搜索
							</view>
						</template>
					</uv-search>
				</view> -->
				<view class="">
					<uv-tabs :list="tabslist" @click="tabsSwiper" lineWidth="15"
						lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
								color: '#262626',
								fontWeight: 'bold',
								transform: 'scale(1.05)',
								fontSize:'28rpx'
					    	}" :inactiveStyle="{
								color: '#7C7C7C',
								transform: 'scale(1)',
								fontSize:'28rpx'
							}" itemStyle="width:42%;height: 34px;"></uv-tabs>
				</view>

			</view>
			<view class="item-view margin-top-20">
				<view class="padding-about-24 padding-top-01">
					<!-- <view class="display-flex margin-top-20 space-between align-items">
						<view class="tabs">
							<view class="">
								注册
							</view>
							<view class="margin-left-10">
								<uv-icon name="arrow-up-fill" size="8"></uv-icon>
								<uv-icon name="arrow-down-fill" size="8"></uv-icon>
							</view>
						</view>
						<view class="tabs">
							<view class="">
								粉丝量
							</view>
							<view class="margin-left-10">
								<uv-icon name="arrow-up-fill" size="8"></uv-icon>
								<uv-icon name="arrow-down-fill" size="8"></uv-icon>
							</view>
						</view>
						<view class="tabs">
							<view class="">
								本月收益
							</view>
							<view class="margin-left-10">
								<uv-icon name="arrow-up-fill" size="8"></uv-icon>
								<uv-icon name="arrow-down-fill" size="8"></uv-icon>
							</view>
						</view>
						<view class="tabs">
							<view class="">
								等级
							</view>
							<view class="margin-left-10">
								<uv-icon name="arrow-up-fill" size="8"></uv-icon>
								<uv-icon name="arrow-down-fill" size="8"></uv-icon>
							</view>
						</view>
					</view> -->
					<view v-for="item,index in userlist" :key="index" class="view margin-top-30">
						<view class="display-flex align-items space-between">
							<image :src="item.headimg" style="width: 80rpx;height: 80rpx;" class="border-radius"
								mode="aspectFill"></image>
							<view class="file-1 margin-left-20 ">
								<view class="display-flex align-items space-between">
									<view class="display-flex align-items">
										<view style="max-width: 300rpx;-webkit-line-clamp: 1;"
											class="webkit-line-clamp  font-size-28 margin-right-10 font-weight-500">
											{{item.nickname || '暂无昵称'}}
										</view>
										<image class="margin-right-10" :src="item.level.icon"
											style="width: 111.45rpx;height: 32rpx;" mode="widthFix"></image>
										<view v-if="item.is_tk == 1" style="color: #FE7335;"
											class="label center-size-20">
											已授权
										</view>
									</view>
									<view class="display-flex align-items">
										<!-- <view style="color: #FE7335;" class="font-size-20 margin-right-10 color-666">
											更多精选
										</view> -->
										<view class="margin-top-05">
											<uv-icon name="arrow-right" color="#FE7335" size="12"></uv-icon>
										</view>
									</view>
								</view>
								<view class="font-size-22 margin-top-05" style="color: #7C7C7C;">
									{{item.create_time}}
								</view>
							</view>
						</view>
						<view class="display-flex space-between margin-top-30 align-items">
							<view class="display-flex align-items">
								<view class="font-size-24 " style="color: #7C7C7C;">
									邀请码：{{item.id}}
								</view>
								<image @click="setClipboardData(item.id)" :src="imgaeUrl('/static/mine/copy.png')"
									class="margin-left-10" style="width: 30rpx;height: 30rpx;" mode=""></image>
							</view>
							<view class="display-flex align-items">
								<view class="font-size-24 " style="color: #7C7C7C;">
									手机号：{{item.phone || '暂无手机号！'}}
								</view>
								<image @click="setClipboardData(item.phone)" v-if="item.phone" class="margin-left-10"
									:src="imgaeUrl('/static/mine/copy.png')" style="width: 30rpx;height: 30rpx;"
									mode=""></image>
							</view>
						</view>
						<view class="margin-top-30" style="border-top: 1rpx solid #F5F5F5;">

						</view>
						<view style="padding:0 48rpx;" class="display-flex margin-top-20 space-between ">
							<view class="display-flex flex-direction-column  center align-items">
								<text class=" font-size-36 font-weight-bold">{{item.today_money}}</text>
								<view class="font-size-22 " style="color: #7C7C7C;">
									今日预估
								</view>
							</view>
							<view class="display-flex flex-direction-column  center align-items">
								<text class=" font-size-36  font-weight-bold">{{item.month_money}}</text>
								<view class="font-size-22 " style="color: #7C7C7C;">
									本月预估(¥)
								</view>
							</view>
							<view class="display-flex flex-direction-column  center align-items">
								<text class=" font-size-36  font-weight-bold">{{item.fans_num}}</text>
								<view class="font-size-22 " style="color: #7C7C7C;">
									粉丝总数
								</view>
							</view>
						</view>
					</view>
				</view>
				<div class="kong"></div>
				<div class="kong"></div>
				<div class="kong safe-area-inset-bottom"></div>
			</view>
		</view>
		<view class="bottom">
			<view @click="navigateTo('/pages/Home/Invitefriends/Invitefriends')" class="padding-about-24">
				<button class="button text-center color-FFF font-size-28"
					style="padding: 6rpx 248rpx;">
					邀请好友
				</button>
			</view>
			<view class="safe-area-inset-bottom">

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		setClipboardData
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const islod = ref(true)
	const tabslist = ref([{
		name: '直接粉丝',
		type: 1
	}, {
		name: '直邀粉丝',
		type: 2
	}])
	const type = ref(1)
	const keyword = ref('')
	const info = ref({})
	const pagingState = ref(false)
	const page = ref(1)
	const userlist = ref([]) //热门视频
	onLoad(function(option) {
		getTeamData()
		getTeamLists()
	});
	onShow(function() {});
	/** 切换 */
	function tabsSwiper(event) {
		console.log(event);
		type.value = event.type
		page.value = 1
		pagingState.value = false
		userlist.value = []
		getTeamLists()
	}
	async function getTeamData() {
		const {
			code,
			data
		} = await api.getTeamData()
		if (code == 0) {
			info.value = data
		}
	}
	/** 获取我的团队*/
	async function getTeamLists() {
		let object = {
			page: page.value,
			team_type: type.value,
			keyword: keyword.value,
			limit: 10
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.getTeamLists(object)
			if (code == 0) {
				islod.value = !islod.value
				if (type.value == 1) {
					tabslist.value[0].name = `直接粉丝 (${data.total})`
				} else {
					tabslist.value[1].name = `直邀粉丝 (${data.total})`
				}
				userlist.value = userlist.value.concat(data.data)
				if (!data.has_more) {
					pagingState.value = true
					return
				}
				page.value++
			}
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		
		getTeamLists()
	});
	onShareAppMessage(function(res) {
		return {
			path: '/pages/Home/home/home' + '?puserId=' + local.get('userinfo').id,
		}
	})
	onShareTimeline(function(res) {
		return {
			path: '/pages/Home/home/home' + '?puserId=' + local.get('userinfo').id,
		}
	})
</script>

<style scoped lang="scss">
	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 90rpx;
		height: 32rpx;
		background: #FFEEEA;
		border-radius: 16rpx;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.item-view {
		width: 750rpx;
		height: 192rpx;
		// background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 68%, #F6F6F6 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.tabs,
	.tabs-active {
		padding: 8rpx 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.tabs-active {
		color: #FF351B;
		background: #FFEEEA;
	}

	.tabs {
		background: #F5F5F5;
		color: #7C7C7C;
	}

	.balance-section {
		width: 702rpx;
		height: 340rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.backGround {
		width: 750rpx;
		height: 452rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>